<template>
    <view class="relative main">
        <z-paging
            ref="paging"
            v-model="userSiginDatas"
            @query="getSignInDetail"
            :fixed="false"
            height="100%"
            :loading-more-enabled="false"
        >
            <view class="bg h-[300rpx] w-full p-[20rpx]">
                <view class="text-white text-sm pl-[620rpx]" @click="toRules">
                    <text>规则</text>
                    <u-icon name="question-circle" class="ml-[10rpx]" size="28"></u-icon>
                </view>
                <view class="text-white flex flex-col justify-center items-center">
                    <view class="text-[72rpx]">{{ userIntegral || '0' }}</view>
                    <view class="text-sm mt-[14rpx]" @click="toDetail">
                        <text>积分明细</text>
                        <u-icon class="ml-[5rpx]" name="arrow-right" size="28"></u-icon>
                    </view>
                </view>
            </view>
            <view class="px-[20rpx] absolute top-[270rpx]">
                <view class="w-[710rpx] bg-white rounded-lg py-[30rpx] px-[22rpx]" v-if="enable">
                    <view>已累计签到 {{ totleSignIn || '0' }} 天</view>
                    <view class="mt-[40rpx]">
                        <view class="encourageRules grid grid-cols-7">
                            <view
                                class="item flex flex-col items-center w-[78rpx] mt-[10rpx]"
                                v-for="(item, index) in userSiginDatas"
                                :key="index"
                            >
                                <view class="circle" v-if="!item.sign">+{{ item.integral }}</view>
                                <image
                                    v-if="item.sign"
                                    src="@/bundle/static/images/is_sign_in.png"
                                    class="image w-[78rpx] h-[78rpx]"
                                ></image>
                                <view class="text-sm text-muted mt-[12rpx]">{{ item.day }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="px-[75rpx] mt-[80rpx]">
                        <button
                            v-if="signInStatus == 1"
                            @click="signIn"
                            class="bg-primary h-[88rpx] rounded-[44rpx] text-white"
                        >
                            立即签到
                        </button>
                        <view
                            v-else
                            class="h-[88rpx] text-center leading-[88rpx] w-full bg-[#f5f5f5] text-[#999999] rounded-full"
                            >已签到</view
                        >
                    </view>
                </view>
                <view
                    class="w-[710rpx] bg-white rounded-lg py-[30rpx] px-[22rpx] h-[200rpx] flex items-center justify-center flex-col text-muted"
                    v-if="!enable"
                >
                    <u-icon name="error-circle" size="40"></u-icon>
                    <view>抱歉～该功能未开启</view>
                </view>
                <!--积分明细-->
                <view class="detail w-[710rpx] bg-white rounded-lg my-[20rpx]" v-if="enable">
                    <view
                        class="py-[26rpx] px-[30rpx] text-[36rpx] font-bold"
                        style="border-bottom: 1px solid #e5e5e5"
                    >
                        积分明细
                    </view>
                    <view class="px-[30rpx]">
                        <view
                            class="item flex justify-between items-center"
                            v-for="(item, index) in signInLogs"
                            :key="index"
                        >
                            <view class="py-[18rpx]">
                                <view class="text-lg">{{ item.action }}</view>
                                <view class="text-muted text-xs mt-[10rpx]">{{
                                    item.updateTime
                                }}</view>
                            </view>
                            <view
                                class="text-xl"
                                :class="{ 'text-[#FA8919]': item.actionType == 1 }"
                            >
                                {{ item.amount }}
                            </view>
                        </view>
                    </view>
                    <view class="py-[29rpx] text-muted text-center" @click="toDetail">
                        查看全部 >
                    </view>
                </view>
            </view>
        </z-paging>
        <!--签到成功弹框-->
        <u-popup v-model="popShow" mode="center" border-radius="14" width="640rpx" height="520rpx">
            <view class="flex flex-col items-center pt-[75rpx]">
                <image
                    class="w-[90rpx] h-[90rpx]"
                    src="@/bundle/static/images/sign_in_success.png"
                ></image>
                <view class="text-[36rpx] text-[#FA8919] mt-[20rpx]">签到成功</view>
                <view class="text-sm text-muted mt-[10rpx]">
                    <text>您已连续签到</text>
                    <text class="text-[#FA8919]"> {{ popData.days }} </text>
                    <text>天啦，加油哦！</text>
                </view>
                <view
                    class="w-[560rpx] h-[160rpx] bg-[#F9F8F8] mt-[38rpx] flex items-center justify-center"
                >
                    <view class="w-[70rpx] h-[70rpx] relative">
                        <image
                            class="w-full h-full"
                            src="@/bundle/static/images/intergral_bg.png"
                        ></image>
                        <view
                            class="absolute top-[10rpx] left-[17rpx] text-[36rpx] text-white font-bold"
                            >{{ popData.changePoints }}</view
                        >
                    </view>
                    <view class="text-lg font-bold ml-[20rpx]">
                        积分+{{ popData.changePoints }}
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getDetail, userSignIn, getSignInLogs } from '@/api/signIn'
import { onLoad } from '@dcloudio/uni-app'

const enable = ref(true)
const signInStatus = ref(1) //1-未签到 2-已签到
const userIntegral = ref(0) //用户积分
const totleSignIn = ref(0) //累计签到天数
const ruleDescription = ref('') //签到规则说明
const userSiginDatas: any = ref([])
const signInLogs: any = ref([]) //积分流水
const paging: any = ref(null)
const popData = ref({
    changePoints: '',
    days: ''
})

//签到成功弹框
const popShow = ref(false)

//签到
const signIn = async () => {
    try {
        popData.value = await userSignIn()
        popShow.value = true
        signInStatus.value = 2
        await getSignInDetail()
    } catch {
        signInStatus.value = 2
    }
}

//获取详情数据
const getSignInDetail = async () => {
    try {
        const res = await getDetail()
        await getLogs()
        paging.value.complete(res.userSiginDatas)
        totleSignIn.value = res.days
        userIntegral.value = res.userPoints
        ruleDescription.value = res.ruleDescription
        signInStatus.value = res.todaySigined ? 2 : 1
        enable.value = res.enable
    } catch (error) {
        console.log(error)
    }
}

//获取积分流水
const getLogs = async () => {
    const { lists } = await getSignInLogs({ pageNo: 1, pageSize: 5 })
    signInLogs.value = lists
}

//跳转至详情页
const toDetail = () => {
    uni.navigateTo({
        url: '/bundle/pages/sign_in_detail/index'
    })
}

//跳转至规则页面
const toRules = () => {
    uni.navigateTo({
        url: `/bundle/pages/sign_in_rules/index?content=${ruleDescription.value}`
    })
}

onLoad(async () => {
    getSignInDetail()
})
</script>

<style lang="scss" scoped>
.main {
    height: calc(100vh - env(safe-area-inset-bottom));
    overflow: scroll;
    .bg {
        background-image: linear-gradient(#609fff, #2073f4);
    }

    .encourageRules {
        .item {
            position: relative;
            .circle {
                width: 78rpx;
                height: 78rpx;
                background-color: #f2f2f2;
                line-height: 78rpx;
                text-align: center;
                border-radius: 50%;
                color: #999999;
                font-size: 26rpx;
            }
            .image {
                z-index: 997;
            }

            &::before {
                z-index: 995;
                content: '';
                position: absolute;
                left: -20rpx;
                top: 39rpx;
                width: 20rpx;
                height: 10rpx;
                background-color: #f2f2f2;
            }
            &:nth-of-type(7n + 1) {
                &::before {
                    content: '';
                    background-color: rgba(0, 0, 0, 0);
                }
            }
        }
    }
    .detail {
        .item {
            border-bottom: 1px solid #e5e5e5;
        }
    }
}
</style>
